<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../wh2114/vuedemo/lib/vue.js"></script>
    <!-- <link rel="stylesheet" href="..wh2114/vuedemo/lib/animate.css" /> -->
    <style></style>
  </head>
  <body>
    <div id="app">
      <h2>{{title}}</h2>
      <p>
        <input type="text" placeholder="请输入" v-focus v-border />
      </p>
      <p v-border>wh2114-daydayup</p>
      <h2 v-demo v-bg-color>Hello world</h2>
      <h2 v-my-show="show">自定义 v-show</h2>
      <button @click="show=!show">点击切换show</button>
      <h2 v-my-demo:click.stop.once="todo" v-my-color="color">
        wh2114 - 晚上看电影
      </h2>
      <button v-my-on:click.stop.once="todosome">点击-todosome</button>
    </div>

    <script>
      // 全局注册指令
      Vue.directive("focus", {
        // 指令名称
        inserted(el) {
          // el 需要操作的DOM
          el.focus();
          el.style.color = "red";
        },
      });

      Vue.directive("Demo", {
        bind(el) {
          console.log("bind");
          el.innerHTML += "DEmo - Demo  - Demo ";
        },
        inserted(el) {
          console.log("inserted");
          el.style.fontSize = "10px";
        },
        update(el) {
          console.log("update");
        },
        unbind(el) {
          console.log("unbind");
        },
      });

      Vue.directive("bgColor", {
        bind(el) {
          el.style.backgroundColor = "pink";
        },
      });
      Vue.directive("myShow", {
        // inserted(el, binding) {
        //   el.style.display = binding.value ? "block" : "none";
        // },
        update(el, binding) {
          el.style.display = binding.value ? "block" : "none";
        },
      });
      Vue.directive("myDemo", {
        bind(el, binding) {
          console.log(binding);
          var s = JSON.stringify;
          el.innerHTML =
            "name 指令名: " +
            s(binding.name) +
            "<br>" +
            "value 指令值: " +
            s(binding.value) +
            "<br>" +
            "expression 表达式: " +
            s(binding.expression) +
            "<br>" +
            "argument: 参数" +
            s(binding.arg) +
            "<br>" +
            "modifiers 修饰符: " +
            s(binding.modifiers) +
            "<br>";
        },
      });

      Vue.directive("myColor", {
        inserted(el, binding) {
          console.log(binding);
          el.style.color = binding.value;
        },
      });

      // 绑定事件的指令
      Vue.directive("myOn", {
        bind(el, binding) {
          console.log(binding);
          el.addEventListener(
            binding.arg,
            binding.value,
            binding.modifiers.stop
          );
        },
      });
      const vm = new Vue({
        data: {
          title: "Vue 自定义指令",
          todo: "Vue is so easy?",
          color: "#0f0",
          show: true,
        },
        directives: {
          // 局部注册指令
          border: {
            inserted(el) {
              el.style.border = "2px solid #000";
            },
          },
        },
        methods: {
          todosome() {
            console.log("todosome - 学好Vue ");
          },
        },
        mounted() {
          document.getElementsByTagName("title")[0].innerHTML = this.title;
        },
      }).$mount("#app");

      // v-shuibowen
      // button 出现一个水波纹效果
    </script>
    <!-- 
        Vue 也允许注册自定义指令   操作底层DOM  
        代码复用和抽象的主要形式是组件 (component 讲到这里再说) 

        v-on   v-if   v-show    v-for   v-model v-bind v-else v-once v-text v-html  
        指令目的   作用    操作底层DOM  

        指令 directive  
        v- 开头     驼峰命名 (单词之间  大写字母  变为小写字母 前面加 -  )  newColor   (W3C HTML 不准出现大写字母 )   

        全局定义  Vue.directive(name,{钩子函数})   Vue.filter
        局部定义  directives      filters 

        指令钩子函数   一个指令定义对象可以提供钩子函数 (操作指令的钩子函数 )
        bind   指令第一次绑定到 元素时候调用     进行一些初始化操作   1 
        inserted  插入   被绑定元素插入父节点时调用  1
        update    更新  数据或者DOM节点 更新    n 
        unbind   只调用一次，指令与元素解绑时调用   1

        钩子函数 有几个参数 (el binding )
        el 绑定的DOM
        binding  指令携带的变量数据

        name 指令名
        value 指令的值  最重要  binding.value
        expression  指令对应的表达式 变量名称
        argument   指令的参数     v-on:click  click args   冒号声明的  
        modifiers   指令的修饰符   v-on.stop:click  stop 修饰符   

        v-slot   分发
        v-pre    
        v-cloak  锁住DOM  
      
     -->
  </body>
</html>
